<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" @open="open">
    <el-form
      ref="formRef"
      :model="formData"
      label-width="auto"
      v-loading="formLoading"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" name="1">
          <el-row :span="24">
            <el-col :span="12">
              <el-form-item label="数据名称:" prop="dataName">
                {{ formData.dataName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="数据编号:" prop="dataNum">
                {{ formData.dataNum  }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="数据量:" prop="dataCount">
                {{ formData.dataCount  }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="数据来源" prop="dataSource">
                {{ formData.dataSource  }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="数据描述:" prop="dataDesc">
                {{ formData.dataDesc   }}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="附件:" prop="attachFile">
                <UploadFile
                  v-model="formData.attachFile"
                  :limit="1"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider content-position="left">共享与访问</el-divider>
          <el-row :span="24">
            <el-col :span="12">
              <el-form-item label="共享状态:" prop="shareStatus">
                <dict-tag :type="DICT_TYPE.DATA_SHARE_STATUS" :value="formData.shareStatus" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="数据接口:" prop="dataUrl">
                {{ formData.dataUrl }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="数据项" name="2">
          <el-table :data="formData.dataItems" class="-mt-10px">
            <el-table-column label="#" align="center" type="index" width="50" fixed="left" />
            <el-table-column label="数据元名称" prop="itemName" min-width="150"/>
            <el-table-column label="数据元英文" prop="itemEnglish" min-width="150"/>
            <el-table-column label="数据元类型" prop="itemType" min-width="150">
              <template #default="{ row }">
                <dict-tag :type="DICT_TYPE.DATA_ELEMENT_TYPE" :value="row.itemType" />
              </template>
            </el-table-column>
            <el-table-column label="描述" prop="itemDesc" min-width="150"/>
            <el-table-column align="center" fixed="right" label="操作" width="60">
              <template #default="{ row }">
                <el-button
                  link
                  type="primary"
                  @click="handleDetail(row)"
                >查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="数据预览" name="3">
          <el-table :data="formData.dataItems" class="-mt-10px">
            <el-table-column label="#" align="center" type="index" width="50" fixed="left" />
            <!-- <el-table-column label="单位名称" prop="itemName" min-width="150"/>
            <el-table-column label="机构代码" prop="itemEnglish" min-width="150"/>
            <el-table-column label="联系人" prop="shareStatus" min-width="150"/>
            <el-table-column label="联系电话" prop="itemDesc" min-width="150"/>
            <el-table-column label="地址" prop="itemDesc" min-width="150"/> -->
            <el-table-column
              v-for="item in formData.dataItems"
              :key="item.id"
              :label="item.itemName"
              :prop="item.itemEnglish"
              min-width="150"
            >
              <template #default="{ row }">
                {{ row[item.itemEnglish] || item.itemDesc }}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="数据下载" name="4">
          <div class="flex items-center justify-between" style="width: 100%;">
            <div>格式筛选：
              <el-radio-group v-model="radioType">
                <el-radio value="">全部</el-radio>
                <el-radio value="XLS">XLS</el-radio>
                <el-radio value="XML">XML</el-radio>
                <el-radio value="JSON">JSON</el-radio>
                <el-radio value="CSV">CSV</el-radio>
                <el-radio value="RDF">RDF</el-radio>
                <el-radio value="0">其它</el-radio>
              </el-radio-group>
            </div>
            <div>
              <el-button
                type="primary"
                @click="handleExport"
                :loading="exportLoading"
              >批量下载</el-button>
              <el-button
                type="primary"
                @click="toggleSelection(formData.dataItems)"
              >全选</el-button>
            </div>
          </div>
          <el-table
            ref="multipleTableRef"
            row-key="id"
            :data="formData.dataItems"
            @selection-change="handleSelectionChange">
            <el-table-column label="#" align="center" type="selection" width="50" fixed="left" />
            <el-table-column label="格式" prop="itemName" min-width="150"/>
            <el-table-column label="名称" prop="itemEnglish" min-width="150"/>
            <el-table-column label="文件大小" prop="shareStatus" min-width="150"/>
            <el-table-column
              label="更新时间"
              align="center"
              prop="updateTime"
              :formatter="dateFormatter"
              width="180px"
            />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import type { TableInstance } from 'element-plus'
import { DICT_TYPE } from '@/utils/dict'
import { propTypes } from '@/utils/propTypes'
import { dateFormatter } from '@/utils/formatTime'
import { DataApi, DataVO } from '@/api/dr/data'

defineOptions({ name: 'DataDetail' })
const emit = defineEmits(['update:visible'])
const props = defineProps({
  visible: propTypes.bool.def(false),
  data: propTypes.object.def({}),
})
// 弹窗的是否展示
const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => {
    emit('update:visible', val)
  },
})
// 弹窗的标题
const dialogTitle = ref<string>('查看')
const formLoading = ref<boolean>(false)
const activeName = ref<string>('1')
const radioType = ref<string>('')
const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<DataVO[]>([])
const exportLoading = ref<boolean>(false)

const	formData = ref<DataVO | any>({})
const getDetail = () => {
  formLoading.value = true
  DataApi.getData(props.data.id).then((data) => {
    console.log('getDetail', data)
    formData.value = data
    DataApi.getDataItemListByDataId(data.id).then(res => {
      formData.value.dataItems = res
    })
  }).finally(() => {
    formLoading.value = false
  })
}
const open = () => {
  getDetail()
}
const toggleSelection = (rows?: DataVO[], ignoreSelectable?: boolean) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(
        row,
        undefined,
        ignoreSelectable
      )
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: DataVO[]) => {
  multipleSelection.value = val
}
const handleDetail = (row: any) => {

}
const handleExport = () => {}
</script>

<style lang="scss" scoped>
</style>
